<template>
    <div>
        <n-card class="CreateProduct__content">
            <n-space vertical>
                <n-steps :current="current" status="process">
                    <n-step
                        title="基本信息"
                    />
                    <n-step
                        title="商品参数"
                    />
                    <n-step
                        title="商品属性"
                    />
                    <n-step
                        title="完成"
                    />
                </n-steps>
            </n-space>
            <br>
            <br>
            
            <n-card v-if="current==1">
                <n-form label-placement="top">
                    <n-form-item label="商品名称：">
                        <n-input v-model:value="goodsPropertiesByValue.goodsName" />
                    </n-form-item>
                    <n-form-item label="商品价格（元）：" >
                        <n-input-number v-model:value="goodsPropertiesByValue.price" />
                    </n-form-item>
                    <n-form-item label="商品数量：" >
                        <n-input-number v-model:value="goodsPropertiesByValue.num" />
                    </n-form-item>
                    <n-form-item label="商品重量（千克）：" >
                        <n-input-number v-model:value="goodsPropertiesByValue.weight" />
                    </n-form-item>
                </n-form>
            </n-card>

            <n-card v-if="current==2">
                <div v-for="(item,index) in goodsPropertiesByValue.dynamicProperties" :key="index">
                    {{item.propertiesName}}
                    <br>
                    <br>
                    <n-space>
                        <n-tag v-for="(t,i) in item.propertiesTags" :key="Number(i)" type="info" closable @close="()=>{
                            goodsPropertiesByValue.dynamicProperties[index].propertiesTags.splice(i,1)
                            }
                            ">
                            {{t}}
                        </n-tag>
                    </n-space>
                    <br>
                </div>
            </n-card>

            <n-card v-if="current==3">
                <n-form label-placement="top">
                    <n-form-item :label="item.propertiesName" v-for="(item,index) in goodsPropertiesByValue.staticProperties" :key="index">
                        <n-input v-model:value="item.propertiesTags" />
                    </n-form-item>
                </n-form>
            </n-card>
            <br>
            <br>
            <n-button-group>
                <n-button @click="prev">
                    上一步
                    <template #icon>
                        <n-icon>
                            <md-arrow-round-back />
                        </n-icon>
                    </template>
                </n-button>
                <n-button @click="next" v-if="current<3">
                    下一步
                    <template #icon>
                        <n-icon>
                            <md-arrow-round-forward />
                        </n-icon>
                    </template>
                </n-button>
                <n-button @click="edit" v-if="current==3">
                    完成
                </n-button>
            </n-button-group>
        </n-card>  
    </div>
</template>

<script lang='ts'>
import { computed, defineComponent, reactive, ref } from 'vue'
import { MdArrowRoundBack, MdArrowRoundForward } from '@vicons/ionicons4'
import { NSpace,NSteps,NStep,NCard,NButtonGroup,NButton,NIcon,NForm,NFormItem,NCascader,NInputNumber,NInput,NDynamicTags,NTag  } from 'naive-ui';
import router from '../router';
import {useRoute} from 'vue-router';

export default defineComponent({
  components: {
    MdArrowRoundBack,
    MdArrowRoundForward,
    NSpace,NSteps,NStep,NCard,NButtonGroup,NButton,NIcon,NForm,NFormItem,NCascader,NInputNumber,NInput,NDynamicTags ,NTag
  },

  mounted(){
    this.goodsProperties();
  },
  setup () {
    const route=useRoute();
    const goodsPropertiesByValue=reactive<{}>({
        // id:'',
        // goodsName:"",
        // price:null,
        // num:null,
        // weight:null,
        // time:null,
        // staticProperties:null,
        // dynamicProperties:null,
    });
    const goodsProperties=()=>{
        let goodsId="";
        if(route.query)
            goodsId=route.query.id;
        let list=JSON.parse(localStorage.getItem('goodsList'));
        for(let i=0;i<list.length;i++)
        {
            if(list[i].id==goodsId)
            {
                goodsPropertiesByValue.id=goodsId;
                goodsPropertiesByValue.goodsName=list[i].goodsName;
                goodsPropertiesByValue.price=list[i].price;
                goodsPropertiesByValue.num=list[i].num;
                goodsPropertiesByValue.weight=list[i].weight;
                goodsPropertiesByValue.time=list[i].time;
                goodsPropertiesByValue.staticProperties=list[i].staticProperties;
                goodsPropertiesByValue.dynamicProperties=list[i].dynamicProperties;
                return list[i];
            }
        }
    };
    
    /**
     * 编辑商品
     */
    const edit=()=>{
        let list=JSON.parse(localStorage.getItem('goodsList'));
        for(let i=0;i<list.length;i++)
        {
            if(list[i].id==route.query.id)
            {
                list[i]=goodsPropertiesByValue;
                localStorage.setItem("goodsList",JSON.stringify(list));
                router.push("/goods/goods-list");
            }
        }
    }

    const current = ref(1);
    function next () {
        if (current.value === null) current.value = 1
        else if (current.value >= 4) current.value = null
        else {current.value++};
    }
    function prev () {
      if (current.value === 0) {current.value = null}
      else if (current.value === null) current.value = 4
      else current.value--
    }
    return {
      currentStatus: ref('process'),
      current,
      next,
      prev,
      goodsPropertiesByValue,
      close,
      edit,
      goodsProperties,
    }
  }
})
</script>

<style>
.CreateProduct__content{
  margin:24px 24px 24px;
  width: inherit;
  font-size:12px;
}
</style>